import React,{useState,useEffect} from 'react'
import axios from 'axios'
import './index.css'
import { Button } from '@nutui/nutui-react'
export default function Index() {
  const [pinglin,setpinglun]=useState([])
  const [All,setAll]=useState("All")

  useEffect(()=>{
    handlepinglun()
  },[All])
  
  const handlepinglun=async()=>{
    let {data}=await axios.get('http://127.0.0.1:3000/pinglunlist')
    setpinglun(data.data)
    if(All=="All"){
      setpinglun(data.data)
    }
    if(All=="man"){
      setpinglun(data.data.filter(item=>item.content=="满意"))
    }
    if(All=="bu"){
      setpinglun(data.data.filter(item=>item.content=="不满意"))
    }
  }
  return (
    <div>
      <div className='info'>
          <div>  
        <Button type="info" onClick={()=>{setAll("All")}}> 全部 </Button>
      </div>
      <div>  
        <Button type="info" onClick={()=>{setAll("man")}}> 满意 </Button>
      </div>
      <div>  
        <Button type="info" onClick={()=>{setAll("bu")}}> 不满意 </Button>
      </div>
      </div>
      <div>
        {
          pinglin.map(item=>(
            <div key={item._id} className="pl">
              <div style={{width:'10%'}}><img style={{width:'100%'}} src={item.avaimgpath} alt="" /></div>
  
                       <div>{item.content}</div>
              <div>{item.name}</div>

       
              </div>
          ))
        }
      </div>
    </div>
  )
}
